<ti-table [(displayedData)]="displayedData" [srcData]="srcData">
  <table>
    <thead>
      <tr>
        <th *ngFor="let column of columns">{{column.title}}</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let you of displayedData">
        <tr>
          <td>
            <span class="ti3-table-tree" (click)="you.showSub = !you.showSub" *ngIf="you.subData !== undefined">
              <ti-icon [name]="you.showSub ? 'minus-square' : 'plus-square'"></ti-icon>
            </span>
            <span [ngClass]="{'ti3-table-tree-no-leaf': !you.subData}">{{you.name}}</span>
          </td>
          <td>{{you.size}}</td>
          <td>{{you.type}}</td>
        </tr>
        <ng-container *ngFor="let son of you.subData">
          <tr *ngIf="you.showSub">
            <td style="padding-left: 34px">
              <span class="ti3-table-tree" (click)="son.showSub = !son.showSub" *ngIf="son.subData !== undefined">
                <ti-icon [name]="son.showSub ? 'minus-square' : 'plus-square'"></ti-icon>
              </span>
              <span [ngClass]="{'ti3-table-tree-no-leaf': !son.subData}">{{son.name}}</span>
            </td>
            <td>{{son.size}}</td>
            <td>{{son.type}}</td>
          </tr>
          <ng-container *ngFor="let grandson of son.subData">
            <tr *ngIf="you.showSub && son.showSub">
              <td style="padding-left: 58px">
                <span [ngClass]="{'ti3-table-tree-no-leaf': !grandson.subData}">{{grandson.name}}</span>
              </td>
              <td>{{grandson.size}}</td>
              <td>{{grandson.type}}</td>
            </tr>
          </ng-container>
        </ng-container>
      </ng-container>
    </tbody>
  </table>
</ti-table>
